<template>
	<view class="page">
		<u-form :model="form" class="form">
			<u-form-item label="姓名" prop="name" label-position="top" required="true">
				<u-input v-model="form.name" placeholder="请填写姓名" />
			</u-form-item>
			<u-form-item label="简介" label-position="top" prop="intro" required="true">
				<u-input v-model="form.IdCard" placeholder="请填写身份证号码" />
			</u-form-item>
			<view class="msg">*填报同行人信息时，须确保相关信息的真实性，并遵守中华人民共和国相关法律</view>

			<u-form-item label-position="top" label="关系" required="true">
				<u-input v-model="form.sex" type="select" placeholder="请选择关系" @click="showSel" />
			</u-form-item>
			<u-select v-model="show" mode="single-column" :list="sexList" @confirm="confirm"></u-select>

			<u-checkbox-group>
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index"
					:name="item.name">{{item.name}}</u-checkbox>
			</u-checkbox-group>
			<view class="btn">
				<u-button type="primary">保存</u-button>
			</view>
			<view class="btMsg">提交数据仅在健康卡小程序使用</view>

		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					name: '',
					IdCard: '',
					sex: ''
				},
				sexList: [{
						value: '1',
						label: '亲属'
					},
					{
						value: '2',
						label: '朋友'
					},
					{
						value: '3',
						label: '其他'
					}
				],
				list: [{
					name: '我同意[贵州健康码]收集、保存、转交我所提交的信息。',
					checked: false,
					disabled: false
				}]
			}
		},
		methods: {
			showSel: function() {
				this.show = true
			},
			confirm: function(res) {
				this.form.sex = res[0].label
				console.log(res[0].label)
			},
			checkboxChange: function(res) {
				console.log(res)
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form {
		width: 90%;
		height: 90%;
	}

	.msg {
		color: #909399;
	}

	.btn {
		margin-top: 50rpx;
	}

	.btMsg {
		width: 100%;
		display: flex;
		justify-content: center;
		color: #909399;
		margin-top: 50rpx;
	}
</style>
